<template>
  <div>
    <!-- <h3>商城</h3> -->
    <van-search v-model="value" placeholder="请输入搜索关键词" @search="sea(value)" />
    <div class="cate">
      <router-link
        :to="'/list?id=' + item.id"
        v-for="item in cates"
        :key="item.id"
        >{{ item.name }}
      </router-link>
    </div>
    <!-- banner图 -->
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe> -->

    <div class="banner">
      <div v-for="item in banners" :key="item.id">
        <img :src="$pre + item.img" alt="" />
      </div>
    </div>
    <!-- 分类 -->
    <div class="sort">
      <h4>分类商品</h4>
      <router-link
        v-for="item in sort"
        :key="item.id"
        :to="'/list?id=' + item.id"
        >{{ item.catename }}</router-link
      >
    </div>
    <hr />
    <div>
      <ul class="nav">
        <li @click="n = 0" :class="n == 0 ? 'active' : ''">热门推荐</li>
        <li @click="n = 1" :class="n == 1 ? 'active' : ''">上新推荐</li>
        <li @click="n = 2" :class="n == 2 ? 'active' : ''">所有商品</li>
      </ul>
      <!-- 热门推荐 -->
      <div v-show="n == 0" v-for="item in goodsHot" :key="item.id" class="item">
        <router-link
          :to="'/detail/' + item_hot.id"
          v-for="item_hot in item"
          :key="item_hot.id"
          >{{ item_hot.goodsname }}</router-link
        >
      </div>
      <!-- 上新推荐 -->
      <div v-show="n == 1" class="item" v-for="item in goodsRec" :key="item.id">
        <router-link
          :to="'/detail/' + item_rec.id"
          v-for="item_rec in item"
          :key="item_rec.id"
          >{{ item_rec.goodsname }}</router-link
        >
      </div>
      <!-- 全部商品 -->
      <div v-show="n == 2" class="item" v-for="item in goodsAll" :key="item.id">
        <router-link
          :to="'/detail/' + item_all.id"
          v-for="item_all in item"
          :key="item_all.id"
          >{{ item_all.goodsname }}</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import { reqBanner, reqGoods, reqSort,reqSearch } from "../../http/http";
export default {
  data() {
    return {
      n: 0,
      value: "",
      // banner图
      banners: [],
      // 分类数据
      sort: [],
      cates: [
        { id: 1, name: "手机通讯" },
        { id: 2, name: "生活家电" },
        { id: 3, name: "家居" },
        { id: 4, name: "服饰" },
      ],
      // 具体商品
      // 热门推荐
      goodsHot: [],
      // 上新推荐
      goodsRec: [],
      goodsAll: [],
    };
  },
  methods: {
    sea(value) {
      console.log(this.value=value);
      this.value=value
      reqSearch({
        keywords:this.value
      }).then(res=>{
        console.log(res);
      })
    },
  },
  mounted() {
    // 请求轮播图数据
    reqBanner().then((res) => {
      // console.log(res);
      this.banners = res.data.list;
    });

    // 请求分类数据
    reqSort().then((res) => {
      // console.log(res);
      this.sort = res.data.list;
    });
    // 请求具体商品
    reqGoods().then((res) => {
      // console.log(res);
      this.goodsHot = res.data.list[0];
      this.goodsRec = res.data.list[1];
      this.goodsAll = res.data.list[2];
    });
  },
};
</script>

<style scoped>
.cate {
  display: flex;
}
.cate a {
  flex: 1;
  text-align: center;
  line-height: 0.8rem;
}
.search {
  width: 1.5rem;
  height: 0.3rem;
  border: 0.01rem solid #aaa;
}
.banner {
  width: 100vw;
  height: 4rem;
  color: #ff4400;
  box-sizing: border-box;
  position: relative;
}
.banner div {
  position: absolute;
}
.banner div img {
  width: 100%;
  height: 100%;
}
.sort h4 {
  width: 100vw;
  text-align: center;
}
.sort a {
  display: block;
  width: 100vw;
  height: 0.6rem;
  border: 0.01rem solid #aaa;
  box-sizing: border-box;
}
div .nav {
  display: flex;
}
div .nav li {
  flex: 1;
  color: #aaa;
}
div .nav .active {
  color: #ff4400;
}
.item a {
  display: block;
  width: 100vw;
  height: 0.6rem;
  border: 0.01rem solid #aaa;
  box-sizing: border-box;
}
</style>